<template>
  <view class="template-type-container">
    <nav-header title="模板类型"></nav-header>
    
    <view class="content" :style="{ paddingTop: statusBarHeight + 44 + 'px' }">
      <view class="type-list">
        <view 
          class="type-item" 
          v-for="(type, index) in templateTypes" 
          :key="index"
          @click="selectType(type.id)"
        >
          <view class="icon">
            <u-icon :name="type.icon" color="#5ac725" size="24"></u-icon>
          </view>
          <view class="name">{{ type.name }}</view>
          <view class="arrow">
            <u-icon name="arrow-right" color="#ccc" size="20"></u-icon>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useTemplateStore } from '@/store/template.js'
import NavHeader from '@/components/nav-header.vue'

const templateStore = useTemplateStore()
const statusBarHeight = ref(20)

// 模板类型列表
const templateTypes = ref(templateStore.templateTypes)

onMounted(() => {
  // 获取状态栏高度
  const systemInfo = uni.getSystemInfoSync()
  statusBarHeight.value = systemInfo.statusBarHeight
})

// 选择模板类型
const selectType = (typeId) => {
  templateStore.setCurrentType(typeId)
  uni.navigateBack()
}
</script>

<style lang="scss" scoped>
.template-type-container {
  min-height: 100vh;
  background-color: #F8F8F8;
  
  .content {
    padding: 16px;
    
    .type-list {
      background-color: #FFFFFF;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
      
      .type-item {
        display: flex;
        align-items: center;
        padding: 16px;
        border-bottom: 1px solid #F2F2F2;
        
        &:last-child {
          border-bottom: none;
        }
        
        .icon {
          margin-right: 12px;
        }
        
        .name {
          flex: 1;
          font-size: 16px;
          color: #333;
        }
        
        .arrow {
          margin-left: 8px;
        }
      }
    }
  }
}
</style> 